<!-- ChatHeader.vue 头部组件 -->
<template>
	<div class="header">
		<div class="user-info">
			<UserAvatar :src="user.avatar" :size="40" />
			<span class="username">{{ user.name }}</span>
		</div>
	</div>
</template>

<script setup>
import UserAvatar from './UserAvatar.vue'

defineProps({
	user: { type: Object, required: true }
})
</script>

<style scoped>
.header {
	padding: 10px;
	border-bottom: 1px solid #eee;
	background: white;
}

.user-info {
	display: flex;
	align-items: center;
	gap: 10px;
}

.username {
	font-weight: 500;
}
</style>
